﻿<div class="ui-widget-content">
    <h3>Efeitos Animados - Efeitos Básicos</h3>
    <p>Uma simples forma de aplicar animações:</p>
    <div style="float: left;">
        <pre>$("#caixa_animada").effect(
    efeito,
    [opcoes],
    [velocidade],
    [callback]
);</pre>
    </div>

    <div style="float: left; margin-left: 80px; height: 150px;">
        <div id="caixa_animada_basica" class="draggable_azul">
            <div style="margin: 50px; text-align: center;"><p>Eu sou uma caixa animada!</p></div>
        </div>
    </div>
    <div style="clear: both;" />

    <p>
        Exemplos:
        <div id="botoes_de_efeitos_basicos" class="ui-widget-content" style="padding: 5px">
            <input type="button" value="blind" />
            <input type="button" value="bounce" />
            <input type="button" value="clip" />
            <input type="button" value="drop" />
            <input type="button" value="explode" />
            <input type="button" value="fade" />
            <input type="button" value="fold" />
            <input type="button" value="highlight" />
            <input type="button" value="puff" />
            <input type="button" value="pulsate" />
            <input type="button" value="scale" />
            <input type="button" value="shake" />
            <input type="button" value="size" />
            <input type="button" value="slide" />
            <input type="button" value="transfer" />
        </div>
    </p>

    <style type="text/css" rel="stylesheet">
        #caixa_animada_basica { width: 400px; padding: 5px; margin: 5px auto; }
        .efeitos-transfer { border: 2px dotted gray; } 
    </style>
    
    <script type="text/javascript">
        inicializador.efeitosBasicos = function() {
            
            var executaEfeitoBasico = function(efeito) {
                // callback function to bring a hidden box back
                function callbackDoEfeitoBasico() {
                    setTimeout(function() {
                        $("#caixa_animada_basica p").text("Eu sou uma caixa animada !");
                        $("#caixa_animada_basica").removeAttr("style");
                        $("#botoes_de_efeitos_basicos input").button("enable");
                    }, 1000);
                };

                // A maioria dos efeitos não necessitam parametros...
                var options = {};
                // ...no entanto alguns efeitos exigem.
                if (efeito === "scale") {
                    options = { percent: 0 };
                } else if (efeito === "transfer") {
                    options = { to: "#botoes_de_efeitos_basicos", className: "efeitos-transfer" };
                } else if (efeito === "size") {
                    options = { to: { width: 70, height: 100 } };
                }

                // Executa o efeito.
                $("#caixa_animada_basica p").text(efeito);
                $("#botoes_de_efeitos_basicos input").button("disable");
                $("#caixa_animada_basica").effect(efeito, options, 500, callbackDoEfeitoBasico);
            };

            $("#botoes_de_efeitos_basicos input").button().click(function() {
                executaEfeitoBasico($(this).val());
                return false;
            });
        }
    </script>
</div>
